<!--
 * @description: 
 * @Author: lhr
 * @Date: 2020-12-02 15:51:39
 * @LastEditors: lhr
 * @LastEditTime: 2020-12-03 10:50:54
-->
<template>
  <div>
    <button @click="toggleLoading()">切换loading显示隐藏</button>
    <teleport to="body">
      <loading-tmp :show="showLoading" :text="loadingText"></loading-tmp>
    </teleport>
  </div>
</template>

<script>
import { ref } from "vue";
import LoadingTmp from "@/components/LoadingTmp.vue";
export default {
  setup() {
    let showLoading = ref(false);
    let loadingText = ref("加载中...");
    function toggleLoading() {
      showLoading.value = !showLoading.value;
    }
    return {
      showLoading,
      toggleLoading,
      loadingText,
    };
  },
  components: {
    LoadingTmp,
  },
};
</script>
